<template>
   <div id="home" class="wrapper">
      <nav-bar class="home-nav"><div slot="center">蘑菇街</div></nav-bar>
      <tab-control :titles="['流行','新款','精选']"
             @tabClick="tabClick"
             ref="tabControl1" class="tab-control"
             v-show="isTabFixed"
             />
        <scroll class="content" ref="scroll" 
                :probe-type="3"
                :pull-up-load="true"
                @scroll="contentScroll"
                @pullingUp="loadMore">
            <home-swiper :banners="banners" @swiperImageLoad="swiperImageLoad"/>
            <recommend-view :recommends="recommends" />
            <feature-view/>
            <tab-control :titles="['流行','新款','精选']"
             @tabClick="tabClick"
             ref="tabControl2"
             />
            <goods-list :goods="showGoods"/>
        </scroll>
        <back-top @click.native="backClick" v-show="isShowBackTop"/>
   </div>
</template>

<script>
import NavBar from '../../components/common/navbar/NavBar'
import TabControl from '../.../../../components/content/tabControl/TabControl'
import GoodsList from '../../components/content/goods/GoodsList'

import HomeSwiper from './childComps/HomeSwiper'
import RecommendView from './childComps/RecommendView'
import FeatureView from './childComps/FeatureView'
import Scroll from '../../components/common/scroll/Scroll'
import BackTop from '../../components/content/backTop/BackTop'

import {getHomeMultidata,getHomeGoods} from '../../network/home'
import {debounce} from '../../common/utils'
import {itemListenrMixin} from '../../common/mixin'
export default {
name:'Home',
components: {
   NavBar,
   TabControl,
   HomeSwiper,
   RecommendView,
   FeatureView,
   GoodsList,
   Scroll,
   BackTop
},
mixins:[itemListenrMixin],
data(){
   return {
      //result: null
      banners: [],
      recommends: [],
      goods: {
         'pop': {page: 0,list: []},
         'new': {page: 0,list: []},
         'sell': {page: 0,list: []},
      },
      currentType: 'pop',
      isShowBackTop: false,
      taboffsetTop: 0,
      isTabFixed: false,
      saveY: 0,
   }
},
created() {
   //请求多个数据
   this.getHomeMultidata(),

   //请求商品数据
   this.getHomeGoods('pop'),
   this.getHomeGoods('new'),
   this.getHomeGoods('sell')
  },
mounted(){
//监听Item中图片加载完成
/* const refresh =debounce(this.$refs.scroll.refresh,100)

//对监听的事件进行保存
   this.itemImgListener =  () =>{ 
      refresh()
   }
   this.$bus.$on('itemImageLoad',this.itemImgListener) */
},
computed: {
		  showGoods() {
		    return this.goods[this.currentType].list
      }
    },
    activated() {
       this.$refs.scroll.scroll.scrollTo(0,this.saveY,0)
       this.$refs.scroll.scroll.refresh()
    },
    deactivated() {
       //保存Y值
      this.saveY = this.$refs.scroll.getScrollY()

      //取消全局事件的监听
 
      this.$bus.$off('itemImgload',this.itemImgListener)
    },
methods: {
   /**
    * 事件监听
    */
   tabClick(index){
     switch (index) {
          case 0:
            this.currentType = 'pop'
            break
          case 1:
            this.currentType = 'new'
            break
          case 2:
            this.currentType = 'sell'
            break
        }
        this.$refs.tabControl1.currentIndex = index;
        this.$refs.tabControl2.currentIndex = index;
   },
   backClick(){
      this.$refs.scroll.scroll.scrollTo(0,0,500)
   },
   contentScroll(position){
      //判断BackTop是否显示
      this.isShowBackTop = (-position.y) > 1000

      //决定tabControl是否吸顶

      this.isTabFixed = (-position.y) > this.taboffsetTop
      
   },
   loadMore(){
      this.getHomeGoods(this.currentType)
   },
   swiperImageLoad(){
    this.taboffsetTop = this.$refs.tabControl2.$el.offsetTop;
   },
   /**
    * 网络请求方法
    */
   getHomeMultidata(){
      getHomeMultidata().then(res=>{
      //console.log(res);
      this.banners = res.data.banner.list,
      this.recommends = res.data.recommend.list});
   },
   getHomeGoods(type) {
      const page = this.goods[type].page + 1
       getHomeGoods(type,page).then(res =>{
         this.goods[type].list.push(...res.data.list) 
         this.goods[type].page += 1 
         this.$refs.scroll.finishPullUp()
      })
   }
}
}
</script>

<style scoped>
 #home{
   /* padding-top: 44px; */
   height: 100vh;
   position: relative;
}
.home-nav{
   background-color:var(--color-tint);
   color: #fff;
   /* position: fixed;
   left: 0;
   right: 0;
   top: 0;
   z-index: 9; */
}
.fixed{
   position: fixed;
   left: 0;
   right: 0;
   top: 44px;
}
 .tab-control{
      position: relative;;
      z-index: 9;
  }
  .content{
     overflow: hidden;
     position: absolute;
     top: 44px;
     bottom: 49px;
  }
/* .content{
   margin-top:44px;
   height:calc(100% - 93px);
   overflow: hidden;
} */
</style>